<template>
  <!-- eld -->
  <el-dialog :destroy-on-close="true"
             :title="title"
             :visible.sync="dialogShow"
             width="45%"
             @close="closeDialog">
    <el-form ref="fromRef"
             :model="fromData"
             :rules="fromRules"
             label-width="140px"
             :inline="false"
             size="normal">
      <el-form-item label="角色名称"
                    prop="role_name">
        <el-input v-model="fromData.role_name"></el-input>
      </el-form-item>
      <el-form-item label="角色标识"
                    prop="identify">
        <el-input v-model="fromData.identify"></el-input>
      </el-form-item>
      <el-form-item label="角色描述"
                    prop="description">
        <el-input v-model="fromData.description"></el-input>
      </el-form-item>
      <el-form-item label="角色权限"
                    prop="">
        <!-- 树 
        label: 'permission_name'===权限管理
        current-node-key当前选中的节点
        -->
        <el-tree :data="menuidsList"
                 show-checkbox
                 :props="{ label: 'permission_name' }"
                 ref="tree"
                 node-key="id"
                 :highlight-current="true"
                 :default-checked-keys="defaultCheckkeys"></el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogShow = false">取 消</el-button>
      <el-button type="primary"
                 @click.native="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getRoleCheckApi,
  addRoleListApi,
  edlRoleListApi,
} from "@/api/permission/role";
export default {
  name: "addloyees",
  data () {
    return {
      fromData: {
        description: "",
        identify: "",
        role_name: "",
        authlist: [],
      },
      fromRules: {
        description: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        identify: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        role_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      menuidsList: [],
      defaultCheckkeys: [],
      // 开关
      dialogShow: false,
    };
  },
  computed: {
    title () {
      return this.fromData.id ? "修改" : "新增";
    },
  },
  created () {
    this.initData();
  },

  methods: {
    async initData () {
      this.menuidsList = await getRoleCheckApi();
    },
    // 确认提交
    async btnOk () {
      try {
        // 1.表单校验
        await this.$refs.fromRef.validate();
      } catch (error) {
        return console.log(error);
      }
      //   2.整理数据，提交数据

      this.fromData.authlist = [
        ...this.$refs.tree.getCheckedKeys(), //获取对钩方法
        ...this.$refs.tree.getHalfCheckedKeys(), //获取半钩方法
      ];
      if (this.fromData.id) {
        // 编辑
        await edlRoleListApi(this.fromData);
        // 3.提示成功
        this.$message.success("编辑成功");
      } else {
        // 添加
        await addRoleListApi(this.fromData);
        // 3.提示成功
        this.$message.success("添加成功");
      }

      // 4.通知列表更新
      this.$emit("updataList");
      // 5.关闭弹框
      this.dialogShow = false;
    },
    // 重置表单，防止遗留问题
    closeDialog () {
      this.$refs.fromRef.resetFields();
      this.defaultCheckkeys = [];
      this.fromData = {
        description: "",
        identify: "",
        role_name: "",
        authlist: [],
      };
    },
  },
};
</script>
<style></style>



